المستودع الموحد (Monorepo) للواجهة الأمامية: إدارة مساحات العمل باستخدام Lerna و Nx

في المشهد المتطور باستمرار لتطوير الواجهة الأمامية، يمكن أن تكون إدارة المشاريع الكبيرة والمعقدة تحديًا كبيرًا. الإعدادات التقليدية متعددة المستودعات (multi-repo)، على الرغم من أنها توفر العزل، يمكن أن تؤدي إلى تكرار الكود، ومشاكل في إدارة الاعتماديات، وأدوات غير متسقة. وهنا تبرز بنية المستودع الموحد (monorepo). المستودع الموحد هو مستودع واحد يحتوي على مشاريع متعددة، غالبًا ما تكون مرتبطة، يتم بناؤها وإصدارها معًا. يقدم هذا النهج مزايا عديدة، لكن إدارة المستودع الموحد بفعالية تتطلب أدوات متخصصة. يستكشف هذا المقال حلين شائعين: Lerna و Nx.

ما هو المستودع الموحد (Monorepo)؟

المستودع الموحد هو مستودع لنظام التحكم في الإصدارات يحتوي على كود للعديد من المشاريع. يمكن أن تكون هذه المشاريع مرتبطة أو مستقلة تمامًا. المفتاح هو أنها تشترك في نفس المستودع. لقد تبنت شركات مثل Google و Facebook و Microsoft و Uber بنجاح المستودعات الموحدة لإدارة قواعد الكود الضخمة الخاصة بها. فكر في Google التي تخزن تقريبًا كل الكود الخاص بها، بما في ذلك Android و Chrome و Gmail، في مستودع واحد.

فوائد المستودع الموحد

• مشاركة الكود وإعادة استخدامه: سهولة مشاركة الكود بين المشاريع دون الحاجة إلى عمليات تغليف ونشر معقدة. تخيل مكتبة نظام تصميم يمكن دمجها بسلاسة في تطبيقات متعددة داخل نفس المستودع.
• إدارة مبسطة للاعتماديات: إدارة الاعتماديات في مكان واحد، مما يضمن الاتساق عبر جميع المشاريع. تحديث اعتمادية مكتبة مشتركة يقوم تلقائيًا بتحديث جميع المشاريع التي تعتمد عليها.
• تغييرات ذرية (Atomic Changes): إجراء تغييرات تشمل مشاريع متعددة في commit واحد، مما يضمن الاتساق ويبسط الاختبار. على سبيل المثال، يمكن إجراء إعادة هيكلة تؤثر على كل من الواجهة الأمامية والخلفية بشكل ذري.
• تعاون محسن: يمكن للفرق التعاون بسهولة في مشاريع مختلفة داخل نفس المستودع، مما يعزز تبادل المعرفة والتطوير متعدد الوظائف. يمكن للمطورين تصفح وفهم الكود بسهولة عبر الفرق المختلفة.
• أدوات وممارسات متسقة: فرض معايير ترميز متسقة، وقواعد linting، وعمليات بناء عبر جميع المشاريع. هذا يحسن جودة الكود وقابلية الصيانة.
• إعادة هيكلة مبسطة: يتم تبسيط مشاريع إعادة الهيكلة واسعة النطاق لأن كل الكود ذي الصلة موجود داخل نفس المستودع. يمكن استخدام أدوات إعادة الهيكلة الآلية عبر قاعدة الكود بأكملها.

تحديات المستودع الموحد

• حجم المستودع: يمكن أن تصبح المستودعات الموحدة كبيرة جدًا، مما قد يبطئ عمليات الاستنساخ (cloning) والفهرسة. يمكن لأدوات مثل `git sparse-checkout` و `partial clone` المساعدة في التخفيف من هذه المشكلة.
• أوقات البناء: يمكن أن يكون بناء المستودع الموحد بأكمله مستهلكًا للوقت، خاصة بالنسبة للمشاريع الكبيرة. تقدم أدوات مثل Lerna و Nx عمليات بناء محسّنة لمعالجة هذا الأمر.
• التحكم في الوصول: قد يكون تقييد الوصول إلى أجزاء معينة من المستودع الموحد معقدًا. يتطلب الأمر تخطيطًا دقيقًا وتنفيذًا لآليات التحكم في الوصول.
• تعقيد الأدوات: يتطلب إعداد وإدارة المستودع الموحد أدوات ومعرفة متخصصة. يمكن أن يكون منحنى التعلم حادًا في البداية.

Lerna: إدارة مشاريع JavaScript في مستودع موحد

Lerna هي أداة شائعة لإدارة مشاريع JavaScript في مستودع موحد. تعمل على تحسين سير العمل حول إدارة المستودعات متعددة الحزم باستخدام Git و npm. وهي مناسبة بشكل خاص للمشاريع التي تستخدم npm أو Yarn لإدارة الاعتماديات.

الميزات الرئيسية لـ Lerna

• إدارة الإصدارات: يمكن لـ Lerna إصدار ونشر الحزم تلقائيًا بناءً على التغييرات التي تم إجراؤها منذ الإصدار الأخير. تستخدم conventional commits لتحديد رقم الإصدار التالي.
• إدارة الاعتماديات: تتعامل Lerna مع الاعتماديات بين الحزم، مما يضمن أن الحزم داخل المستودع الموحد يمكن أن تعتمد على بعضها البعض. تستخدم الربط الرمزي (symlinking) لإنشاء اعتماديات محلية.
• تنفيذ المهام: يمكن لـ Lerna تنفيذ الأوامر عبر حزم متعددة بالتوازي، مما يسرع عمليات البناء والاختبار. تدعم تشغيل النصوص البرمجية المحددة في `package.json`.
• كشف التغييرات: يمكن لـ Lerna اكتشاف الحزم التي تغيرت منذ الإصدار الأخير، مما يسمح بعمليات بناء ونشر مستهدفة.

مثال على استخدام Lerna

دعنا نوضح استخدام Lerna بمثال مبسط. افترض أن لدينا مستودعًا موحدًا به حزمتان: `package-a` و `package-b`. تعتمد `package-b` على `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. تهيئة Lerna:

lerna init

ينشئ هذا الأمر `lerna.json` ويحدث ملف `package.json` الجذري. يكوّن ملف `lerna.json` سلوك Lerna.

2. تثبيت الاعتماديات:

npm install
# or
yarn install

يقوم هذا بتثبيت الاعتماديات لجميع الحزم في المستودع الموحد، بناءً على ملفات `package.json` في كل حزمة.

3. تشغيل أمر عبر الحزم:

lerna run test

ينفذ هذا الأمر النص البرمجي `test` المحدد في ملفات `package.json` لجميع الحزم التي تم تعريفه فيها.

4. نشر الحزم:

lerna publish

يحلل هذا الأمر تاريخ الـ commits، ويحدد الحزم التي تغيرت، ويرفع إصداراتها بناءً على conventional commits، وينشرها إلى npm (أو السجل الذي اخترته).

تكوين Lerna

ملف `lerna.json` هو قلب تكوين Lerna. يسمح لك بتخصيص سلوك Lerna، مثل:

• `packages`: يحدد موقع الحزم داخل المستودع الموحد. غالبًا ما يتم تعيينه إلى `["packages/*"]`.
• `version`: يحدد استراتيجية الإصدار. يمكن أن يكون `independent` (كل حزمة لها إصدارها الخاص) أو إصدار ثابت.
• `command`: يسمح لك بتكوين خيارات لأوامر Lerna محددة، مثل `publish` و `run`.

مثال على ملف `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: نظام بناء ذكي وسريع وقابل للتوسيع

Nx هو نظام بناء قوي يوفر ميزات متقدمة لإدارة المستودعات الموحدة. يركز على عمليات البناء التزايدية (incremental builds)، والتخزين المؤقت للحسابات (computation caching)، وتنظيم المهام لتحسين أوقات البناء وإنتاجية المطورين بشكل كبير. بينما يركز Lerna بشكل أساسي على إدارة الحزم، يوفر Nx نهجًا أكثر شمولاً لإدارة سير عمل المستودع الموحد بأكمله، بما في ذلك توليد الكود، والتحقق من جودته (linting)، والاختبار، والنشر.

الميزات الرئيسية لـ Nx

• البناء التزايدي: يحلل Nx الرسم البياني للاعتماديات لمشاريعك ويعيد بناء المشاريع التي تغيرت فقط منذ آخر عملية بناء. هذا يقلل بشكل كبير من أوقات البناء.
• التخزين المؤقت للحسابات: يخزن Nx نتائج المهام مؤقتًا، مثل عمليات البناء والاختبارات، بحيث يمكن إعادة استخدامها إذا لم تتغير المدخلات. وهذا يسرع دورات التطوير بشكل أكبر.
• تنظيم المهام: يوفر Nx نظامًا قويًا لتنظيم المهام يسمح لك بتحديد مسارات بناء معقدة وتنفيذها بكفاءة.
• توليد الكود: يوفر Nx أدوات لتوليد الكود يمكن أن تساعدك في إنشاء مشاريع ومكونات ووحدات جديدة بسرعة، مع اتباع أفضل الممارسات والمعايير المتسقة.
• نظام إضافات (Plugin Ecosystem): يمتلك Nx نظام إضافات غني يدعم مختلف التقنيات وأطر العمل، مثل React، Angular، Node.js، NestJS، وغيرها.
• تصور الرسم البياني للاعتماديات: يمكن لـ Nx تصور الرسم البياني للاعتماديات لمستودعك الموحد، مما يساعدك على فهم العلاقات بين المشاريع وتحديد المشكلات المحتملة.
• الأوامر المتأثرة (Affected Commands): يوفر Nx أوامر لتشغيل المهام فقط على المشاريع المتأثرة بتغيير معين. هذا يسمح لك بتركيز جهودك على المجالات التي تحتاج إلى اهتمام.

مثال على استخدام Nx

دعنا نوضح استخدام Nx بمثال مبسط. سنقوم بإنشاء مستودع موحد بتطبيق React ومكتبة Node.js.

1. تثبيت واجهة سطر الأوامر (CLI) الخاصة بـ Nx عالميًا:

npm install -g create-nx-workspace

2. إنشاء مساحة عمل Nx جديدة:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

ينشئ هذا الأمر مساحة عمل Nx جديدة مع تطبيق React. يخبر الخيار `--preset=react` أداة Nx بتهيئة مساحة العمل بتكوينات خاصة بـ React.

3. توليد مكتبة:

nx generate @nrwl/node:library my-library

يولد هذا الأمر مكتبة Node.js جديدة تسمى `my-library`. يقوم Nx تلقائيًا بتكوين المكتبة واعتمادياتها.

4. بناء التطبيق:

nx build my-app

يبني هذا الأمر تطبيق React. يحلل Nx الرسم البياني للاعتماديات ويعيد بناء الملفات الضرورية فقط.

5. تشغيل الاختبارات:

nx test my-app

يشغل هذا الأمر اختبارات الوحدة لتطبيق React. يخزن Nx نتائج الاختبار مؤقتًا لتسريع عمليات الاختبار اللاحقة.

6. عرض الرسم البياني للاعتماديات:

nx graph

يفتح هذا الأمر واجهة ويب تصور الرسم البياني للاعتماديات للمستودع الموحد.

تكوين Nx

يتم تكوين Nx من خلال ملف `nx.json`، الموجود في جذر مساحة العمل. يحدد هذا الملف المشاريع في مساحة العمل، واعتمادياتها، والمهام التي يمكن تنفيذها عليها.

تشمل خيارات التكوين الرئيسية في `nx.json` ما يلي:

• `projects`: يحدد المشاريع في مساحة العمل وتكوينها، مثل الدليل الجذري وأهداف البناء.
• `tasksRunnerOptions`: يكوّن مشغل المهام، وهو المسؤول عن تنفيذ المهام وتخزين نتائجها مؤقتًا.
• `affected`: يكوّن كيفية تحديد Nx للمشاريع المتأثرة بتغيير ما.

مثال على ملف `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna مقابل Nx: أيهما تختار؟

كل من Lerna و Nx أدوات ممتازة لإدارة المستودعات الموحدة للواجهة الأمامية، لكنهما يلبيان احتياجات مختلفة قليلاً. إليك مقارنة لمساعدتك في اختيار الأداة المناسبة لمشروعك:

الميزة	Lerna	Nx
التركيز	إدارة الحزم	نظام البناء وتنظيم المهام
البناء التزايدي	محدود (يتطلب أدوات خارجية)	مدمج ومحسن للغاية
التخزين المؤقت للحسابات	لا	نعم
توليد الكود	لا	نعم
نظام الإضافات	محدود	واسع
منحنى التعلم	أقل	أعلى
التعقيد	أبسط	أكثر تعقيدًا
حالات الاستخدام	المشاريع التي تركز بشكل أساسي على إدارة ونشر حزم npm.	المشاريع الكبيرة والمعقدة التي تتطلب أوقات بناء محسنة، وتوليد الكود، ونظام بناء شامل.

اختر Lerna إذا:

• كنت تحتاج بشكل أساسي إلى إدارة ونشر حزم npm.
• كان مشروعك صغيرًا إلى متوسط الحجم نسبيًا.
• كنت تفضل أداة أبسط مع منحنى تعلم أقل.
• كنت على دراية بالفعل بـ npm و Yarn.

اختر Nx إذا:

• كنت تحتاج إلى أوقات بناء محسنة وعمليات بناء تزايدية.
• كنت تريد إمكانيات توليد الكود.
• كنت تتطلب نظام بناء شامل مع تنظيم للمهام.
• كان مشروعك كبيرًا ومعقدًا.
• كنت على استعداد لاستثمار الوقت في تعلم أداة أكثر قوة.

هل يمكنك استخدام Lerna مع Nx؟

نعم، يمكن استخدام Lerna و Nx معًا. يتيح لك هذا المزيج الاستفادة من إمكانيات إدارة الحزم في Lerna مع الاستفادة من نظام البناء المحسن وتنظيم المهام في Nx. يمكن تكوين Nx كمشغل مهام لـ Lerna، مما يوفر عمليات بناء تزايدية وتخزينًا مؤقتًا للحسابات للحزم التي تديرها Lerna.

أفضل الممارسات لإدارة المستودع الموحد للواجهة الأمامية

بغض النظر عما إذا كنت تختار Lerna أو Nx، فإن اتباع أفضل الممارسات أمر بالغ الأهمية لإدارة مستودع موحد للواجهة الأمامية بنجاح:

• إنشاء هيكل مشروع واضح: نظم مشاريعك بشكل منطقي ومتسق. استخدم اصطلاح تسمية واضح للحزم والمكتبات.
• فرض معايير ترميز متسقة: استخدم أدوات التحقق من جودة الكود (linters) والمنسقات (formatters) لضمان أسلوب كود متسق عبر جميع المشاريع. يمكن دمج أدوات مثل ESLint و Prettier في سير عملك.
• أتمتة عمليات البناء والاختبار: استخدم مسارات CI/CD لأتمتة عمليات البناء والاختبار والنشر. يمكن استخدام أدوات مثل Jenkins و CircleCI و GitHub Actions.
• تطبيق مراجعات الكود: قم بإجراء مراجعات شاملة للكود لضمان جودة الكود وقابلية الصيانة. استخدم طلبات السحب (pull requests) وأدوات مراجعة الكود.
• مراقبة أوقات البناء والأداء: تتبع أوقات البناء ومقاييس الأداء لتحديد الاختناقات ومجالات التحسين. يوفر Nx أدوات لتحليل أداء البناء.
• توثيق هيكل المستودع الموحد وعملياتك: أنشئ وثائق واضحة تشرح هيكل المستودع الموحد، والأدوات والتقنيات المستخدمة، وسير عمل التطوير.
• اعتماد Conventional Commits: استخدم conventional commits لأتمتة عمليات الإصدار والإصدار. تدعم Lerna هذا المفهوم بشكل افتراضي.

الخاتمة

توفر المستودعات الموحدة للواجهة الأمامية مزايا كبيرة لإدارة المشاريع الكبيرة والمعقدة، بما في ذلك مشاركة الكود، وإدارة الاعتماديات المبسطة، والتعاون المحسن. Lerna و Nx هما أداتان قويتان يمكن أن تساعداك في إدارة مستودع موحد للواجهة الأمامية بفعالية. Lerna هو خيار رائع لإدارة حزم npm، بينما يوفر Nx نظام بناء أكثر شمولاً مع ميزات متقدمة مثل البناء التزايدي وتوليد الكود. من خلال دراسة احتياجات مشروعك بعناية واتباع أفضل الممارسات، يمكنك اعتماد مستودع موحد للواجهة الأمامية بنجاح وجني فوائده.

تذكر أن تأخذ في الاعتبار عوامل مثل خبرة فريقك، وتعقيد المشروع، ومتطلبات الأداء عند الاختيار بين Lerna و Nx. جرب كلتا الأداتين وابحث عن الأداة التي تناسب احتياجاتك الخاصة على أفضل وجه.

حظًا موفقًا في رحلتك مع المستودع الموحد!